<template>
  <el-card class="box-card">
    <!-- 角色数据表单 -->
    <div>
      <!-- 搜索框 -->
      <el-form
        ref="dataFrom"
        :inline="true"
        :model="dataFrom"
        class="demo-form-inline"
      >
        <el-form-item label="姓名：">
          <el-input
            v-model="dataFrom.xm"
            clearable
            placeholder="姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="车牌号：">
          <el-input
            v-model="dataFrom.cph"
            clearable
            placeholder="车牌号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input
            v-model="dataFrom.sjh"
            clearable
            placeholder="手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getDataListBySearch">查询</el-button>
          <el-button type="success" @click="DaoRu_dialogFormVisible = true">导入</el-button>
          <el-button type="success" @click="exportAll()">导出全部</el-button>
        </el-form-item>
      </el-form>
      <!--      <el-row>-->
      <!--        <el-col-->
      <!--          v-for="item in dataList"-->
      <!--          :key="item.id"-->
      <!--          :offset="1"-->
      <!--          :span="10"-->
      <!--        >-->
      <!--          <el-card class="box-card" style="margin-top: 10px;">-->
      <!--            <div class="car">-->
      <!--              <img id="picture" :src="'data:image/png;base64,' + unZipImage(item.image)" alt="未上传头像"/>-->
      <!--              <div class="carInfo">-->
      <!--                <p>-->
      <!--                  姓名:<span>{{ item.xm }}</span>-->
      <!--                  <br/>-->
      <!--                  手机号码:<span>{{ item.sjh }}</span>-->
      <!--                  <br/>-->
      <!--                  部门:<span>{{ item.bm }}</span>-->
      <!--                </p>-->
      <!--                <br/>-->
      <!--                <h2>{{ item.cph }}</h2>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </el-card>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!-- 角色数据表单 -->
      <el-table ref="multipleTable" :data="dataList" border style="width: 100%">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="姓名" prop="xm" width="200">
        </el-table-column>
        <el-table-column label="车牌号" prop="cph" width="400">
        </el-table-column>
        <el-table-column label="手机号" prop="sjh" width="200">
        </el-table-column>
        <el-table-column label="部门" prop="bm" width="200">
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="DaoRu_dialogFormVisible" title="导入车辆" width="35%">
      <el-form :model="formChange">
        <el-form-item label="" label-width="120px">
          <el-upload
            :auto-upload="false"
            :before-upload="handleBeforeUpload"
            :file-list="fileList"
            :limit="fileLimit"
            :multiple="true"
            :on-change="handleChangeFile"
            :on-exceed="handleExceed"
            :show-file-list="true"
            action="#"
            drag
            list-type="text"
            name="file"
            style="margin-top: 10px;"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">只能上传xls,xlsx文件，且不超过{{ this.fileSize }}kb</div>
          </el-upload>
          <el-button type="primary" @click="handleImport()">导 入</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑按钮打开的页面 -->
    <el-dialog
      :visible.sync="dialogFormVisibleChange"
      title="编辑车辆"
      width="35%"
    >
      <el-form :model="formChange">
        <el-form-item label="账号" label-width="120px">
          <el-input
            v-model="formChange.username"
            autocomplete="off"
            placeholder="账号"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" label-width="120px">
          <el-input
            v-model="formChange.name"
            autocomplete="off"
            placeholder="姓名"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="120px">
          <el-input
            v-model="formChange.email"
            autocomplete="off"
            placeholder="邮箱"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" label-width="120px">
          <el-input
            v-model="formChange.mobile"
            autocomplete="off"
            placeholder="手机号码"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述信息" label-width="120px">
          <el-input
            v-model="formChange.remark"
            style="width: 300px"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleChange = false">取 消</el-button>
        <el-button type="primary" @click="handleChange()">更 新</el-button>
      </div>
    </el-dialog>
    <!-- 页号 -->
    <el-pagination
      :current-page="pageIndex"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="totalPage"
      layout="total ,sizes,prev,pager,next,jumper"
      style="margin-top: 30px"
      @size-change="sizeChangeHandle"
      @current-change="CurrentChangeHandle"
    >
    </el-pagination>
  </el-card>
</template>
<script>

export default {
  name: "index",
  data() {
    return {
      multipleSelection: [], //批量操作数组
      dataFrom: {
        xm: "",
        cph: "",
        sjh: ""
      },//搜索
      formLook: {}, //查看
      insertForm: {},//新增
      formChange: {}, //编辑
      dataList: [], //页面展示的数据集合
      fileList: [], //上传文件，以数组方式上传
      fileListed: 0, //上传过的文件
      fileLimit: 5, //文件上传个数限制
      fileSize: 10,//文件限制大小
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      dialogFormVisible: false, //默认关闭新建车辆界面
      dialogFormVisibleChange: false, //默认关闭编辑车辆界面
      DaoRu_dialogFormVisible: false, //默认关闭导入车辆界面
      dialogFormVisibleLook: false,//默认关闭查看车辆界面
      dataListFrom: "getDataList",
    };
  },
  methods: {
    //改变数组大小
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.SizeOrCurrentChangeAfter();
    },
    //改变当前页号
    CurrentChangeHandle(val) {
      this.pageIndex = val;
      this.SizeOrCurrentChangeAfter();
    },
    //在更改数组大小或者页号前，判断数据来源
    SizeOrCurrentChangeAfter() {
      if (this.dataListFrom === "getDataList")
        this.getDataList();
      else this.getDataListBySearch();
    },
    //新增页面的确认键
    handleInsert() {
      const data = {
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex),
        car: this.insertForm
      }
      this.$http.post("/car/insertCar", data).then((res) => {
        this.cutDataList(res);
        this.dialogFormVisible = false;
        this.insertForm = []
      });
    },
    //编辑页面的确认键
    handleChange() {
      this.$http.post("/car/updateCar", this.formChange).then((res) => {
        this.dialogFormVisibleChange = false;
        this.getDataList();
      });
    },
    //将数据分配到数组中
    cutDataList(res) {
      const data = this.$cutPageDataList(res)
      this.dataList = data.dataList
      this.totalPage = data.totalPage
    },
    //查询所有数据
    getDataList() {
      this.dataListFrom = "getDataList";
      const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
      this.$http.post("/car/getCars", pageInfo).then((res) => {
        this.cutDataList(res);
      });
    },
    //查询单条数据
    getDataListBySearch() {
      this.dataListFrom = "getDataListBySearch";
      const data = {
        car: this.dataFrom,
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex)
      }
      this.$http.post("/car/getCarBySearch", data).then((res) => {
        this.cutDataList(res);
      });
    },
    //查看按钮
    handleLook(index, item) {
      this.dialogFormVisibleLook = true;
      this.formLook = item;
    },
    //编辑按钮
    handleEdit(index, item) {
      this.dialogFormVisibleChange = true; //打开编辑车辆界面
      //回显数据
      this.formChange = item;
    },
    //删除按钮
    handleDelete(item) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 表示处理的是 删除操作
          const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
          this.$http.post("/car/deleteCar/" + item, pageInfo).then((res) => {
            this.cutDataList(res);
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    //解压头像
    unZipImage(image) {
      if (image !== null)
        return this.$unzip(image)
      else return null;
    },

    //上传前的校验
    handleBeforeUpload(file) {
      const uploadTypes = ["xlsx", "xls"];
      const filetype = file.name.replace(/.+\./, "");
      const isRightSize = (file.size || 0) / 1024 / 1024 < this.fileSize;
      if (!isRightSize) {
        this.$message.error("文件大小超过 " + this.fileSize + "MB");
        return false;
      }
      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message:
            "请上传后缀名为xls,xlsx的附件",
        });
        return false;
      }
      return true;
    },
    //文件数量改变
    handleChangeFile(file, fileList) {
      this.fileList = fileList;
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
    },
    //导入的xls传到后端
    handleImport() {
      //上传文件的需要FormData类型;所以要转
      const FormDates = new FormData();
      this.fileList.forEach((val) => {
        FormDates.append("files", val.raw);
      });
      this.$http.post("/import/car",
        FormDates, {headers: {"Content-Type": "",}}
      ).then(() => {
        this.DaoRu_dialogFormVisible = false;
        this.getDataList();
      });
    },
    //导出数据生辰exl表格
    exportAll() {
      this.$http.post("/export/car").then(res => {
        this.$exportExcel(res)
      })
    },
  },
  mounted() {
    this.getDataList();
  },
};
</script>

<style lang="less" scoped>
.car {
  border-bottom: 1px solid #999;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  // padding-top: ;
  .carInfo {
    margin-left: 40px;

    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999;
      margin-top: 0;
    }
  }

  img {
    margin-left: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
}

.login-info {
  p {
    font-size: 14px;
    color: #999999;
    line-height: 28px;

    span {
      color: #666666;
      margin-left: 20px;
    }
  }
}

.system_bulletin {
  .system_title {
    font-size: 22px;
    color: #000000;
  }

  .system_context {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border: 1px #f2f2f2 solid;
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
}
</style>
